<%@ page import="com.it.domain.PageBean" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>
<script src="./statics/jquery-3.4.1.js"></script>
<html>
<head>
    <title>图书清单</title>
    <style>
        .maintable{
            border: gray 1px solid;
            border-radius: 5px;
            padding-left: 20px;
            padding-right: 20px;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
        }

        th{
            text-align: right;
            height: 50px;
            vertical-align: middle;
        }

        td{
            height: 50px;
            text-align: center;
        }

        p{
            font-size: 30px;
            /*border: 1px solid red;*/
            text-align: center;
            color: hotpink;
            margin-top: 10px;
        }

        #page_div{
            /*border: solid 1px red;*/
            text-align: center;
            margin-top: 15px;
            width: 420px;
            margin-left: 420px;
            float: left;
        }

        #pagecount{
            /*border: 1px solid red;*/
            float: right;
            width: 50px;
            height: 80px;
            margin-right: 300px;
            margin-top: 15px;
            width: 250px;
        }

        #pages{
            font-size: 15px;
            float: left;
            border: 1px solid gray;
            border-radius: 3px;
            width: 80px;
            margin-top: 12px;
            padding-left: 25px;
            height: 25px;
        }

        #counts{
            font-size: 15px;
            float: right;
            width: 100px;
            margin-bottom: 20px;
            margin-top: 12px;
            border: 1px solid gray;
            border-radius: 3px;
            height: 25px;
            margin-right: 10px;
            padding-left: 15px;
        }
    </style>
</head>

<body>
<%--头部--%>
<ul class="layui-nav" lay-filter="">
    <!--    layui-this-->
    <li class="layui-nav-item"><a href="homepage.jsp" target="_blank">首页</a></li>
    <li class="layui-nav-item layui-this">
        <a href="javascript:;">图书管理</a>
        <dl class="layui-nav-child "> <!-- 二级菜单 -->
            <dd><a href="books_list.jsp" target="_blank">图书清单</a></dd>
            <dd><a href="">图书查询</a></dd>
            <dd><a href="books_add.jsp">添加图书</a></dd>
            <dd><a href="">删除图书</a></dd>
        </dl>
    </li>

    <li class="layui-nav-item">
        <a href="javascript:;">读者管理</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="">信息显示</a></dd>
            <dd><a href="">添加读者</a></dd>
        </dl>
    </li>

    <li class="layui-nav-item"><a href="javascript:;">图书借阅信息</a></li>
    <li class="layui-nav-item"><a href="">图书归还信息</a></li>
    <li class="layui-nav-item" style="float: right">
        <a href=""><img src="./img/user.png" width="37px" height="38px" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退出</a></dd>
        </dl>
    </li>
</ul>
<p>图书清单</p>

<%--表格--%>
<div class="maintable">
<table class="layui-table">
    <thead>
    <tr>
        <td style="width: 50px">序号</td>
        <td style="width: 120px">书号</td>
        <td style="width: 120px">书名</td>
        <td style="width: 120px">作者</td>
        <td style="width: 120px">出版社</td>
        <td style="width: 120px">出版日期</td>
        <td style="width: 120px">图书类别</td>
        <td>图书简介</td>
        <td style="width: 50px">修改</td>
        <td style="width: 50px">删除</td>
    </tr>
    </thead>
    <tbody id="tbody"></tbody>
</table>
</div>

<%--分页--%>
<div id="page_div"></div>

<div id="pagecount">
<%--    总页数--%>

    <div id="pages"></div>
<%--    总记录数--%>
    <div id="counts"></div>

</div>

</body>
<script type="text/javascript">
    $(window).attr('loction',"/System/BooksServlet?currentPage=1");
</script>
<%--窗口加载完成后从后台获取数据--%>
<%--花了整整一天--%>
<script src="./layui/layui.js"></script>
<script>
    var page = document.getElementById("pages");
    var count = document.getElementById("counts");
    var currentPage=1; //设置首页页码
    window.onload= function () {
        loadData();    //请求数据
        getPage();    //分页操作
    };

    //从后端加载数据
    function loadData(){
        $.ajax({
            url:"/System/BooksServlet", //向后端传递参数
            data:{"currentPage":currentPage},
            dataType: "json",
            success:function (data) { //遍历输出json对象中的list (经过一天找bug终于找出了错误) 要先将list转换成json对象
                var json = eval(data);
                var inf;
                $.each(json,function (index,item) {//改了一天终于改出来了
                    inf+="<tr>" +
                        "<td>"+(index+1)+"</td>" +
                        "<td>"+json[index].number+"</td>" +
                        "<td>"+json[index].name+"</td>" +
                        "<td>"+json[index].author+"</td>" +
                        "<td>"+json[index].press+"</td>" +
                        "<td>"+json[index].date+"</td>" +
                        "<td>"+json[index].category+"</td>" +
                        "<td>"+json[index].information+"</td>" +
                        "<td><img src='./img/modify_icon.png' width='30px' height='30px'/></td>" +
                        "<td><img src='./img/delete_icon.png' width='30px' height='30px'/></td>" +
                        "</tr>"
                })
                $("#tbody").html(inf);//输出数据
            }
        });
    }

    //获取分页记录
    function getPage(){
        $.ajax({
            url: "/System/pagesServlet", //向后端传递参数
            data: {"currentPage": currentPage},
            dataType: "json",
            success: function (data1) {
                var json = eval(data1);
                var pages = json.page;
                var counts = json.count;
                page.innerText = "共" + " " + pages + " " + "页";
                count.innerText = "共" + " " + counts + " " + "条记录";

                //将layui函数放在了ajax函数中
                layui.use('laypage', function () {
                    var laypage = layui.laypage;
                    //alert(datacount);

                    //执行一个laypage实例
                    laypage.render({
                        elem: 'page_div' //注意，这里的 test1 是 ID，不用加 # 号
                        , count: json.count //数据总数，从服务端得到
                        , limit: 8 //每页记录个数
                        , curr: currentPage //现在的页码
                        , hash: true
                        , jump: function (obj, first) {
                            //首次不执行
                            if (!first) {
                                //do something
                                currentPage = obj.curr;//获取点击的页码
                                loadData();
                            }
                        }
                    });
                });
            }
        });
    }
</script>

<script type="text/javascript">
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
    });
</script>
</html>
